<template>
  <div class="prescription-order-manage-container">
    <h2 class="page-title">处方流转订单管理</h2>
    
    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="filter-row">
        <div class="filter-item">
          <el-input 
            v-model="queryParams.patientSearch" 
            placeholder="输入患者姓名或手机号" 
            clearable 
            @keyup.enter="handleQuery"
          />
        </div>
        
        <div class="filter-item date-range">
          <span class="label">日期</span>
          <el-date-picker
            v-model="queryParams.startTime"
            type="datetime"
            placeholder="开始时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
          />
          <span class="separator">—</span>
          <el-date-picker
            v-model="queryParams.endTime"
            type="datetime"
            placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
          />
        </div>
        
        <div class="filter-item">
          <el-button type="primary" @click="handleQuery">筛选</el-button>
        </div>
      </div>
    </div>
    
    <!-- 数据表格 -->
    <div class="table-section">
      <!-- 标签页 -->
      <div class="tabs">
        <div 
          v-for="(tab, index) in tabs" 
          :key="index" 
          :class="['tab-item', {'active': queryParams.orderStatus === tab.value}]"
          @click="handleTabChange(tab.value)"
        >
          {{ tab.label }}
        </div>
      </div>
      
      <!-- 表格 -->
      <div class="table-container">
        <div class="table-actions">
          <el-checkbox v-model="selectAll" @change="handleSelectAllChange">全选</el-checkbox>
          <el-button type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">批量删除</el-button>
          <span class="record-info">共{{ totalPage }}页/{{ totalCount }}条数据</span>
        </div>
        
        <el-table
          v-loading="loading"
          :data="prescriptionList"
          border
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="orderNo" label="订单编号" align="center" width="150" />
          <el-table-column prop="prescriptionNo" label="处方编号" align="center" width="150" />
          <el-table-column prop="patient" label="患者" align="center" />
          <el-table-column prop="department" label="科室" align="center" />
          <el-table-column prop="doctor" label="医生" align="center" />
          <el-table-column label="费用" align="center" width="100">
            <template #default="scope">
              {{ scope.row.cost }} 元
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center">
            <template #default="scope">
              <el-tag :type="getOrderStatusType(scope.row.orderStatus)">
                {{ scope.row.orderStatus }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="prescriptionStatus" label="处方审核状态" align="center">
            <template #default="scope">
              <el-tag :type="getPrescriptionStatusType(scope.row.prescriptionStatus)">
                {{ scope.row.prescriptionStatus }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="purchaseMethod" label="购药方式" align="center" />
          <el-table-column prop="dispenseStatus" label="发药状态" align="center">
            <template #default="scope">
              <el-tag :type="getDispenseStatusType(scope.row.dispenseStatus)">
                {{ scope.row.dispenseStatus || '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template #default="scope">
              <el-button type="primary" link @click="handleView(scope.row)">查看</el-button>
              <el-button 
                v-if="scope.row.orderStatus === '已失效'" 
                type="danger" 
                link 
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.pageIndex"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    
    <!-- 查看订单对话框 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="getDetailTitle()" 
      width="800px" 
      destroy-on-close
    >
      <div v-if="orderDetail" class="order-detail">
        <!-- 标签页切换 -->
        <el-tabs v-model="activeTabName">
          <el-tab-pane label="患者信息" name="patientInfo">
            <div class="detail-section">
              <div class="detail-grid">
                <div class="detail-item">
                  <span class="label">患者姓名：</span>
                  <span>{{ orderDetail.patient?.name }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">性别：</span>
                  <span>{{ orderDetail.patient?.gender }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">年龄：</span>
                  <span>{{ orderDetail.patient?.age }} 岁</span>
                </div>
                <div class="detail-item">
                  <span class="label">手机号：</span>
                  <span>{{ orderDetail.patient?.phone }}</span>
                </div>
                <div class="detail-item full-width">
                  <span class="label">疾病：</span>
                  <span>{{ orderDetail.patient?.disease || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">肝功能：</span>
                  <span>{{ orderDetail.patient?.liverFunction || '正常' }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">肾功能：</span>
                  <span>{{ orderDetail.patient?.kidneyFunction || '正常' }}</span>
                </div>
                <div class="detail-item full-width">
                  <span class="label">过敏史：</span>
                  <span>{{ orderDetail.patient?.allergyHistory || '无' }}</span>
                </div>
                <div class="detail-item full-width">
                  <span class="label">生育状态：</span>
                  <span>{{ orderDetail.patient?.fertilityStatus || '-' }}</span>
                </div>
                <div class="detail-item full-width">
                  <span class="label">病情描述：</span>
                  <span>{{ orderDetail.patient?.diseaseDescription || '无' }}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 修改处方信息标签页，添加更多按钮和功能 -->
          <el-tab-pane label="处方信息" name="prescriptionInfo">
            <div class="detail-section">
              <h3 class="section-title">处方基本信息</h3>
              <div class="detail-grid">
                <div class="detail-item">
                  <span class="label">处方编号：</span>
                  <span>{{ orderDetail.prescription?.no }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">创建时间：</span>
                  <span>{{ formatDateTime(orderDetail.prescription?.createTime || '') }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">处方状态：</span>
                  <span>{{ orderDetail.prescription?.status }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">开方医生：</span>
                  <span>{{ orderDetail.prescription?.doctor }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">科室：</span>
                  <span>{{ orderDetail.prescription?.department }}</span>
                </div>
                <div class="detail-item full-width">
                  <span class="label">初步诊断：</span>
                  <span>{{ orderDetail.prescription?.diagnosis || '-' }}</span>
                </div>
                <div class="detail-item full-width">
                  <span class="label">处理意见：</span>
                  <span>{{ orderDetail.prescription?.treatment || '-' }}</span>
                </div>
                <div class="detail-item full-width prescription-actions">
                  <el-button type="primary" size="small" @click="handleViewPrescription">查看处方</el-button>
                  <el-button type="info" size="small" @click="handleViewPrescriptionQR">查看处方二维码</el-button>
                </div>
              </div>
            </div>
            
            <div class="detail-section">
              <h3 class="section-title">药品清单</h3>
              <div v-if="orderDetail.prescription?.medicines && orderDetail.prescription.medicines.length > 0" class="medicine-list">
                <div v-for="(medicine, index) in orderDetail.prescription.medicines" :key="index" class="medicine-item">
                  <div class="medicine-image">
                    <div class="rx-tag">Rx</div>
                    <el-image 
                      v-if="medicine.imageUrl" 
                      :src="medicine.imageUrl" 
                      :preview-src-list="[medicine.imageUrl]"
                      style="width: 70px; height: 70px"
                      fit="cover"
                    />
                    <div v-else class="no-image">无图片</div>
                  </div>
                  <div class="medicine-info">
                    <div class="medicine-name">{{ medicine.name }} <span class="medicine-quantity">×{{ medicine.quantity }}</span></div>
                    <div class="medicine-spec">规格：{{ medicine.specification }}</div>
                    <div class="medicine-price">￥{{ medicine.price }}</div>
                    <div class="medicine-usage">用药情况：正在服用；口服，每天一次，每次1片，用药21天</div>
                  </div>
                  <div class="medicine-actions">
                    <el-button type="primary" size="small" @click="handleViewOriginalPrescription">查看原始处方</el-button>
                  </div>
                </div>
              </div>
              <div v-else class="empty-medicines">暂无药品数据</div>
            </div>
          </el-tab-pane>
          
          <!-- 修改订单信息标签页，根据状态显示不同内容 -->
          <el-tab-pane label="订单信息" name="orderInfo">
            <div class="detail-section">
              <div class="detail-grid">
                <div class="detail-item">
                  <span class="label">订单编号：</span>
                  <span>{{ orderDetail.order?.orderNo }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">订单状态：</span>
                  <span>
                    <el-tag :type="getOrderStatusType(orderDetail.order?.status || '')">
                      {{ orderDetail.order?.status }}
                    </el-tag>
                  </span>
                </div>
                <div class="detail-item">
                  <span class="label">购药方式：</span>
                  <span>{{ orderDetail.order?.purchaseMethod }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">应付金额：</span>
                  <span>￥{{ orderDetail.order?.payableAmount }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">优惠金额：</span>
                  <span>￥{{ orderDetail.order?.couponAmount }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">实际支付：</span>
                  <span>￥{{ orderDetail.order?.actualPayment }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">创建时间：</span>
                  <span>{{ formatDateTime(orderDetail.order?.createTime || '') }}</span>
                </div>
                
                <!-- 根据订单状态显示不同的内容 -->
                <template v-if="['已完成'].includes(orderDetail.order?.status || '')">
                  <div class="detail-item">
                    <span class="label">支付方式：</span>
                    <span>{{ orderDetail.order?.paymentMethod || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">支付时间：</span>
                    <span>{{ formatDateTime(orderDetail.order?.paymentTime || '') || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">发药状态：</span>
                    <span>
                      <el-tag :type="getDispenseStatusType(orderDetail.order?.dispenseStatus || '')">
                        {{ orderDetail.order?.dispenseStatus || '未发药' }}
                      </el-tag>
                    </span>
                  </div>
                </template>
              </div>
            </div>
            
            <!-- 根据订单状态显示不同的操作按钮 -->
            <div class="order-actions">
              <template v-if="orderDetail.order?.status === '待支付'">
                <el-alert
                  title="该订单尚未支付"
                  type="warning"
                  :closable="false"
                  show-icon
                />
              </template>
              
              <template v-else-if="orderDetail.order?.status === '已完成' && orderDetail.order?.dispenseStatus === '未发药'">
                <el-alert
                  title="该订单已支付，等待发药"
                  type="info"
                  :closable="false"
                  show-icon
                />
              </template>
              
              <template v-else-if="orderDetail.order?.status === '已完成' && orderDetail.order?.dispenseStatus === '未核准发药'">
                <el-alert
                  title="该订单已支付，等待核准发药"
                  type="info"
                  :closable="false"
                  show-icon
                  style="margin-bottom: 15px;"
                />
                <el-button type="primary" @click="handleApproveDispense">核准发药</el-button>
              </template>
              
              <template v-else-if="orderDetail.order?.status === '已完成' && orderDetail.order?.dispenseStatus === '已准备发药'">
                <el-alert
                  title="该订单已准备好发药"
                  type="success"
                  :closable="false"
                  show-icon
                />
              </template>
              
              <template v-else-if="orderDetail.order?.status === '已完成' && orderDetail.order?.dispenseStatus === '已发药'">
                <el-alert
                  title="该订单已完成，药品已发放"
                  type="success"
                  :closable="false"
                  show-icon
                />
              </template>
              
              <template v-else-if="orderDetail.order?.status === '已失效'">
                <el-alert
                  title="该订单已失效"
                  type="error"
                  :closable="false"
                  show-icon
                />
              </template>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">返回</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { axiosrzsh } from '@/http/axiosRead'

// 定义处方订单的接口类型
interface PrescriptionOrder {
  orderNo: string
  prescriptionNo: string
  patient: string
  department: string
  doctor: string
  cost: number
  disease: string
  orderAmount: number
  createTime: string
  orderStatus: string
  prescriptionStatus: string
  purchaseMethod: string
  dispenseStatus: string
}

// 定义查询参数
const queryParams = reactive({
  patientSearch: '',
  startTime: '',
  endTime: '',
  orderStatus: 0, // 默认查询全部
  pageIndex: 1,
  pageSize: 10
})

// 标签页配置
const tabs = [
  { label: '全部', value: 0 },
  { label: '待支付', value: 1 },
  { label: '已完成', value: 2 },
  { label: '已失效', value: 3 }
]

// 数据列表
const prescriptionList = ref<PrescriptionOrder[]>([])
const totalCount = ref(0)
const totalPage = ref(0)
const loading = ref(false)
const dialogVisible = ref(false)
const currentOrder = ref<PrescriptionOrder | null>(null)

// 选择行相关
const selectAll = ref(false)
const selectedRows = ref<PrescriptionOrder[]>([])

// 替换script部分的接口定义部分
interface Medicine {
  name: string
  imageUrl: string
  quantity: number
  specification: string
  price: number
  usage: string
}

interface PatientDetail {
  name: string
  gender: string
  age: number
  phone: string
  disease: string
  liverFunction: string
  kidneyFunction: string
  allergyHistory: string
  fertilityStatus: string
  diseaseDescription: string
}

interface PrescriptionDetail {
  no: string
  createTime: string
  status: string
  doctor: string
  department: string
  diagnosis: string
  treatment: string
  medicines: Medicine[]
}

interface OrderDetail {
  orderNo: string
  status: string
  purchaseMethod: string
  dispenseStatus: string
  payableAmount: number
  couponAmount: number
  actualPayment: number
  createTime: string
  paymentMethod?: string
  paymentTime?: string
}

interface PrescriptionOrderDetail {
  patient?: PatientDetail
  prescription?: PrescriptionDetail
  order?: OrderDetail
}

// 添加新的状态变量
const orderDetail = ref<PrescriptionOrderDetail | null>(null)
const activeTabName = ref('patientInfo')

// 获取处方流转订单列表
const getPrescriptionList = async () => {
  loading.value = true
  try {
    const response = await axiosrzsh.get('/PrescriptionOrder', {
      params: queryParams
    })
    if (response.data.code === 200) {
      prescriptionList.value = response.data.pageData || []
      totalCount.value = response.data.totaCount || 0
      totalPage.value = response.data.totaPage || 0
    } else {
      ElMessage.error(response.data.msg || '获取数据失败')
    }
  } catch (error) {
    console.error('获取处方流转订单数据失败:', error)
    ElMessage.error('获取数据失败，请检查网络连接')
  } finally {
    loading.value = false
  }
}

// 格式化日期时间
const formatDateTime = (dateTimeStr: string): string => {
  if (!dateTimeStr) return '-'
  const date = new Date(dateTimeStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
}

// 获取订单状态样式类型
const getOrderStatusType = (status: string): string => {
  switch (status) {
    case '待支付':
      return 'warning'
    case '已完成':
      return 'success'
    case '已失效':
      return 'info'
    default:
      return 'info'
  }
}

// 获取处方状态样式类型
const getPrescriptionStatusType = (status: string): string => {
  switch (status) {
    case '审核通过':
      return 'success'
    case '未通过':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取发药状态样式类型
const getDispenseStatusType = (status: string): string => {
  switch (status) {
    case '已发药':
      return 'success'
    case '未发药':
      return 'warning'
    case '-':
    case '':
    case null:
    case undefined:
      return 'info'
    default:
      return 'info'
  }
}

// 处理查询
const handleQuery = () => {
  queryParams.pageIndex = 1
  getPrescriptionList()
}

// 处理标签页切换
const handleTabChange = (status: number) => {
  queryParams.orderStatus = status
  handleQuery()
}

// 处理分页大小改变
const handleSizeChange = (size: number) => {
  queryParams.pageSize = size
  getPrescriptionList()
}

// 处理分页页码改变
const handleCurrentChange = (page: number) => {
  queryParams.pageIndex = page
  getPrescriptionList()
}

// 处理全选变更
const handleSelectAllChange = (val: boolean) => {
  if (val) {
    selectedRows.value = [...prescriptionList.value]
  } else {
    selectedRows.value = []
  }
}

// 处理选择行变更
const handleSelectionChange = (rows: PrescriptionOrder[]) => {
  selectedRows.value = rows
  selectAll.value = rows.length === prescriptionList.value.length && rows.length > 0
}

// 处理查看详情
const handleView = async (row: PrescriptionOrder) => {
  try {
    loading.value = true
    const response = await axiosrzsh.get(`/PrescriptionOrder/${row.orderNo}`)
    if (response.data.code === 200) {
      orderDetail.value = response.data.data
      dialogVisible.value = true
      activeTabName.value = 'patientInfo' // 默认显示患者信息标签页
    } else {
      ElMessage.error(response.data.msg || '获取订单详情失败')
    }
  } catch (error) {
    console.error('获取订单详情失败:', error)
    ElMessage.error('获取订单详情失败')
  } finally {
    loading.value = false
  }
}

// 获取详情对话框标题
const getDetailTitle = (): string => {
  if (!orderDetail.value || !orderDetail.value.order) return '处方流转订单详情'
  return `处方流转订单详情 - ${orderDetail.value.order.status}`
}

// 处理删除
const handleDelete = (row: PrescriptionOrder) => {
  ElMessageBox.confirm('确认删除此处方流转订单?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里添加删除API调用
    ElMessage.success('删除成功')
    getPrescriptionList()
  }).catch(() => {})
}

// 处理批量删除
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) return
  
  ElMessageBox.confirm(`确认删除选中的 ${selectedRows.value.length} 条记录?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里添加批量删除API调用
    ElMessage.success('批量删除成功')
    getPrescriptionList()
  }).catch(() => {})
}

// 添加操作处理方法
const handleViewPrescription = () => {
  ElMessage.info('查看处方功能')
}

const handleViewPrescriptionQR = () => {
  ElMessage.info('查看处方二维码功能')
}

const handleViewOriginalPrescription = () => {
  ElMessage.info('查看原始处方功能')
}

const handleApproveDispense = async () => {
  try {
    ElMessageBox.confirm('确认核准发药?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      loading.value = true
      // 这里应该调用核准发药的API
      await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟API调用
      ElMessage.success('核准发药成功')
      
      // 重新获取订单详情
      if (orderDetail.value?.order?.orderNo) {
        const response = await axiosrzsh.get(`/PrescriptionOrder/${orderDetail.value.order.orderNo}`)
        if (response.data.code === 200) {
          orderDetail.value = response.data.data
        }
      }
      loading.value = false
    }).catch(() => {})
  } catch (error) {
    console.error('核准发药失败:', error)
    ElMessage.error('核准发药失败')
    loading.value = false
  }
}

// 页面加载时获取数据
onMounted(() => {
  getPrescriptionList()
})
</script>

<style scoped>
.prescription-order-manage-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.filter-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f7f7f7;
  border-radius: 5px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-item {
  margin-right: 15px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.filter-item .label {
  margin-right: 8px;
  white-space: nowrap;
}

.date-range {
  display: flex;
  align-items: center;
}

.separator {
  margin: 0 8px;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
}

.tab-item.active {
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
}

.table-container {
  margin-bottom: 20px;
}

.table-actions {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.record-info {
  margin-left: auto;
  color: #666;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

.order-detail {
  padding: 10px 0;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.detail-section {
  margin-bottom: 20px;
  background-color: #f9f9f9;
  border-radius: 5px;
  padding: 15px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.detail-item {
  line-height: 24px;
}

.detail-item .label {
  font-weight: bold;
  margin-right: 10px;
  color: #606266;
}

.full-width {
  grid-column: 1 / -1; /* 跨两列 */
}

.empty-medicines {
  text-align: center;
  color: #909399;
  padding: 20px 0;
}

.order-actions {
  margin-top: 20px;
}

.prescription-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.medicine-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.medicine-item {
  display: flex;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

.medicine-image {
  width: 70px;
  height: 70px;
  position: relative;
  margin-right: 15px;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
}

.rx-tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f56c6c;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 0 0 4px 0;
  z-index: 1;
}

.no-image {
  color: #909399;
  font-size: 12px;
}

.medicine-info {
  flex: 1;
}

.medicine-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.medicine-quantity {
  font-weight: normal;
  color: #606266;
  margin-left: 5px;
}

.medicine-spec {
  color: #606266;
  font-size: 13px;
  margin-bottom: 5px;
}

.medicine-price {
  color: #f56c6c;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.medicine-usage {
  color: #606266;
  font-size: 13px;
}

.medicine-actions {
  display: flex;
  align-items: flex-start;
  margin-left: 10px;
}
</style> 